<template>
    <div class="center">
        <div class="search">
            <span class="td">全景视图</span>
            <div class="search-bd">
                <div class="search-wrapper">
                    <el-autocomplete
                        v-model="state"
                        value-key="name"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容并选择一条"
                        @select="handleSelect"
                        class="s-input"
                    ></el-autocomplete>
                    <span class="goSearch" @click="goSearch()">搜索</span>
                </div>
            </div>
        </div>
        <div class="wrapper-list">
            <ul>
                <li
                    :class="{'act': act == item.id}"
                    v-for="(item, index) in domainList"
                    :key="item.id"
                    @click="changeType(item.id)"
                >
                    <button type="mini" @click="getSystemList(item.id)">{{item.name}}</button>
                </li>
            </ul>
        </div>
        <div class="info-wrapper">
            <el-row class :gutter="24">
                <el-col :span="4" :key="index" v-for="(item, index) in systemList">
                    <div class="info" @click="handlePop(item, index)">
                        <div class="item">
                            <p class="title">{{item.name}}</p>
                            <div class="nums">
                                <span class="icon1">{{item.servNum}}</span>
                                <span class="icon2">{{amountConversion(item.tenMinuteReq)}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="info-pop" v-if="infoPop">
                <div class="pop-wrapper">
                    <div class="x" @click="closePop"></div>
<!--                <div class="left" @click="leftPop"></div>
                    <div class="right" @click="rightPop"></div>-->
                    <div class="title">{{systemName}}</div>
                    <div class="td1 icon1">
                        提供
                        <span class="big">{{servNum}}</span> 个服务
                    </div>
                    <div class="td1 icon2">
                        近10分钟调用量
                        <span class="big">{{amountConversion(tenMinuteReq)}}</span>次
                    </div>
                    <p class="goCenter" @click="goCenterDetail(systemId)">进入中心服务视图</p>
                    <div class="hot-left"></div>

                    <div class="hot-list">
                        <div class="info-b">
                            <div class="title">业务量TOP3服务</div>
                            <div class="info-h"  v-for="(item, index) in systemTenMinuteReqTop3.reqTop3 ">
                                <div class="item" >
                                    <span :class="chooseClass(item.rn)"></span>
                                    <div class="td">
                                        <p class="p">{{item.servName}}</p>
                                        <p class="p">{{item.servCode}}@{{item.servVersion}}</p>
                                    </div>
                                    <span class="amount">{{item.reqNum}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="info-b">
                            <div class="title">失败率TOP3服务</div>
                            <div class="info-h" v-for="(item, index) in systemTenMinuteFailTop3.failTop3 ">
                                <div class="item">
                                    <span :class="chooseClass(item.rn)"></span>
                                    <div class="td">
                                        <p class="p">{{item.servName}}</p>
                                        <p class="p">{{item.servCode}}@{{item.servVersion}}</p>
                                    </div>
                                    <span class="amount">{{item.fail}}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import stApi from '@/api/systemTree';

export default {
    data() {
        return {
            search: [],
            state: '',
            searchSystemId: '',
            searchDomainId: '',
            timeout: null,
            act: 0,
            domainList: [],
            infoPop: false,
            curPopIndex: 0,
            systemList: [],
            systemId:null,
            systemName:null,
            servNum:0,
            tenMinuteReq:0,
            systemTenMinuteFailTop3:{
                failTop3:[]
            },
            systemTenMinuteReqTop3:{
                reqTop3:[]
            }
        };
    },
    methods: {
        chooseClass(a){
            return "num"+a;
        },
        amountConversion(a){
            if(a>=10000 && a<=999999) {
                a = (a/10000).toFixed(1) + "万";
            }else if(a>=999999 && a< 100000000){
                a = (a/10000).toFixed(0) + "万";
            }else if (a >= 100000000){
                a = (a/100000000).toFixed(1) + "亿";
            }
            return a;
        },
        goSearch(){
            stApi.getSystemList(this.searchDomainId).then(res => {
                if (res.code == 0){
                    this.systemList = res.systemList;
                    let that = this;
                    this.systemList.forEach((item,index) => {
                        if(item.code == this.searchSystemId){
                            stApi.getSystemTenMinuteReqTop3(this.searchSystemId).then(res => {
                                if (res.code == 0){
                                    that.systemTenMinuteReqTop3 = res.systemTenMinuteReqTop3;
                                    that.systemId = item.code;
                                    that.systemName = item.name;
                                    that.servNum = item.servNum;
                                    that.tenMinuteReq= item.tenMinuteReq;
                                }else{
                                }
                            });
                            stApi.getSystemTenMinuteFailTop3(this.searchSystemId).then(res => {
                                if (res.code == 0){
                                    that.systemTenMinuteFailTop3 = res.systemTenMinuteFailTop3;
                                }else{
                                }
                            })
                            that.infoPop = true;
                        }
                    })
                }else{
                }
            });
        },
        goCenterDetail(systemId){
            this.$router.replace({path: '/centerdetails/'+systemId})
        },
        getSystemList(id){
            var _this = this;
            stApi.getSystemList(id).then(res => {
                if (res.code == 0){
                    _this.systemList = res.systemList;
                }else{
                }
            })
            let that = this;
            that.infoPop = false;
        },
        querySearchAsync(queryString, cb) {
            var search = this.search;
            var results = queryString ? search.filter(this.createStateFilter(queryString)) : search;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return state.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0;
            };
        },
        handleSelect(item) {
            this.searchSystemId = item.code;
            this.searchDomainId = item.parId;
            console.log(item);
        },
        changeType(_i) {
            let that = this;
            that.act = _i;
        },
        handlePop(it, _i) {
            let that = this;
            var systemId = it.code;
            stApi.getSystemTenMinuteReqTop3(systemId).then(res => {
                if (res.code == 0){
                    that.systemTenMinuteReqTop3 = res.systemTenMinuteReqTop3;
                    that.systemId = it.code;
                    that.systemName = it.name;
                    that.servNum = it.servNum;
                    that.tenMinuteReq= it.tenMinuteReq;
                }else{
                }
            })
            stApi.getSystemTenMinuteFailTop3(systemId).then(res => {
                if (res.code == 0){
                    that.systemTenMinuteFailTop3 = res.systemTenMinuteFailTop3;
                }else{
                }
            })
            that.infoPop = true;
            that.curPopIndex = _i;

            console.log(it, _i);
        },
        closePop() {
            let that = this;

            that.infoPop = false;
        },
        leftPop() {
            let that = this,
                i = that.curPopIndex;
            i = i - 1;
            if (i < 0) {
                that.$message.error('没有更多内容');
                return;
            }
            console.log(i);
            that.curPopIndex = i;
        },
        rightPop() {
            let that = this,
                i = that.curPopIndex;
            i = i + 1;

            if (i > 29) {
                that.$message.error('没有更多内容');
                return;
            }

            console.log(i);
            that.curPopIndex = i;
        }
    },
    mounted() {
        var _this = this;
        //this.search = this.loadAll();
        stApi.getDomainList().then(res => {
            if (res.code == 0){
                _this.domainList = res.domainList;
            }else{
            }
        })
        stApi.getAllSystemList().then(res => {
            if (res.code == 0){
                _this.search= res.systemList;
            }else{
            }
        })

    }
};
</script>

<style lang="scss" scoped>
.center {
    // background: url(../../../assets/img/bg.png) 50% no-repeat;
    background: linear-gradient(#c58ae4 5%, #b984dd 10%, #5d55a7, #1c202f);
    background-size: cover;
    position: relative;
    min-height: 700px;

    .search {
        padding-top: 20px;
        margin: 0 0 0 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-emphasis: center;
        position: relative;
        .td {
            color: #fff;
            font-size: 28px;
            font-weight: bold;
        }
        .search-bd {
            position: absolute;
            top: 25px;
            right: 55px;
        }
        .search-wrapper {
            position: relative;
            width: 250px;
            .s-input {
                height: 30px;
                width: 190px;

                /deep/ .el-input__inner {
                    border-top-left-radius: 15px;
                    border-bottom-left-radius: 15px;
                }
            }
            .goSearch {
                cursor: pointer;
                position: absolute;
                top: 0;
                right: 0;
                padding: 0 18px;
                color: #fff;
                background-color: #f4805d;
                font-size: 13px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
            }
        }
    }
    .wrapper-list {
        margin: 60px 45px 0;
        background: rgba(171, 151, 211, 0.5);
        border-radius: 10px;
        padding: 12px 24px;
        ul {
            display: flex;
            justify-content: space-between;
            li {
                button {
                    font-size: 14px;
                    font-weight: bold;
                    color: #fff;
                    background: linear-gradient(#9c76ce, #182a75);
                    border-radius: 10px;
                    padding: 10px;
                    text-align: center;
                    padding: 12px 24px;
                    cursor: pointer;
                    min-width: 100px;
                    outline: none;
                    &:hover {
                        background: linear-gradient(#fe9985, #d4481e);
                    }
                }
            }

            .act {
                button {
                    background: linear-gradient(#fe9985, #d4481e);
                }
            }
        }
    }
    .info-wrapper {
        // margin: 0 45px;
        padding: 0 45px;
        margin-top: 18px;
        position: relative;
        .hot-left {
            position: absolute;
            top: 105px;
            right: -20px;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-right: 10px solid #fd3b1d;
            border-bottom: 10px solid transparent;
        }
        .hot-list {

            position: absolute;
            right: -400px;
            bottom: -100px;
            background-color: rgba(66, 59, 93, 0.9);
            width: 350px;
            padding-left: 30px;
            border-radius: 5px;
            border-left: 2px solid #fd3b1d;
            .info-b{
                height: 210px;
                .title {
                    color: #d35837;
                    margin-top: 25px;
                }
                .info-h {
                    margin-top: 25px;
                    color: #fff;
                    .item {
                        display: flex;
                        font-size: 12px;
                        margin-bottom: 20px;
                        .num1 {
                            width: 25px;
                            height: 20px;
                            background: url(../../../assets/img/top1.png) 50% no-repeat;
                            background-size: contain;
                        }
                        .num2 {
                            width: 25px;
                            height: 20px;
                            background: url(../../../assets/img/top2.png) 50% no-repeat;
                            background-size: contain;
                        }
                        .num3 {
                            width: 25px;
                            height: 20px;
                            background: url(../../../assets/img/top3.png) 50% no-repeat;
                            background-size: contain;
                        }
                        .td {
                            margin-left: 15px;
                            margin-right: 20px;
                            .p {
                                white-space:nowrap;
                                text-overflow:ellipsis;
                                overflow:hidden;
                                width: 230px;
                            }
                        }
                    }
                }
            }
        }
        .info {
            background-color: #514fa0;
            border-radius: 10px;
            color: #fff;
            text-align: center;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            padding-bottom: 16px;
            margin-bottom: 25px;
            cursor: pointer;
            .title {
                height: 40px;
                padding-top: 18px;
                padding-bottom: 15px;
                font-size: 18px;
                font-weight: bold;
            }
            .nums {
                padding: 0 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .icon1 {
                    margin-right: 15px;
                    flex: 1;
                    padding-left: 9px;
                    font-size: 12px;
                    background: url(../../../assets/img/num1.png) 0 50% no-repeat;
                    background-size: 15px;
                    display: inline-block;
                }
                .icon2 {
                    flex: 1;
                    padding-left: 9px;
                    font-size: 12px;
                    background: url(../../../assets/img/num2.png) 0 50% no-repeat;
                    background-size: 15px;
                    display: inline-block;
                }
            }
        }
        .info-pop {
            position: absolute;
            top: 125px;
            left: 50%;
            margin-left: -170px;
            .pop-wrapper {
                border: 5px solid #8d7dbf;
                border-radius: 10px;
                background-color: #6b5cac;
                width: 330px;
                height: 245px;
                color: #fff;
                position: relative;
                .x {
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    width: 15px;
                    height: 15px;
                    background: url(../../../assets/img/del.png) 50% no-repeat;
                    background-size: contain;
                    cursor: pointer;
                }
                .left {
                    position: absolute;
                    top: 50%;
                    left: 15px;
                    width: 25px;
                    height: 25px;
                    background: url(../../../assets/img/left-1.png) 50% no-repeat #3f456f;
                    background-size: 10px;
                    cursor: pointer;
                    border-radius: 50%;
                }
                .right {
                    position: absolute;
                    top: 50%;
                    right: 15px;
                    width: 25px;
                    height: 25px;
                    background: url(../../../assets/img/right-1.png) 50% no-repeat #3f456f;
                    background-size: 10px;
                    cursor: pointer;
                    border-radius: 50%;
                }
                .title {
                    font-size: 20px;
                    font-weight: bold;
                    text-align: center;
                    margin-top: 25px;
                    margin-bottom: 16px;
                }
                .td1 {
                    width: 230px;
                    margin: 0 auto;
                    height: 35px;
                    line-height: 35px;
                    background-color: #8b8abf;
                    border-radius: 35px;
                    font-size: 12px;
                    text-align: center;
                    margin-bottom: 10px;
                    .big {
                        font-size: 14px;
                        font-weight: bold;
                    }
                }
                .icon1 {
                    background: url(../../../assets/img/num1.png) 5px 50% no-repeat #8b8abf;
                    background-size: 25px;
                }
                .icon2 {
                    background: url(../../../assets/img/num2.png) 5px 50% no-repeat #8b8abf;
                    background-size: 25px;
                }
                .goCenter {
                    margin-top: 40px;
                    font-size: 12px;
                    cursor: pointer;
                    color: #f58e7a;
                    text-align: center;
                }
            }
        }
    }
}
</style>